<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>websocket</title> 

<script type="text/javascript">  
	  var websocket = null;  
 
	 //WebSocket连接 
	function connect() { 
	  var url = document.getElementById('url').value; 
	  //var url =  "ws://127.0.0.1:8889/websocket?username=1874561123&subscriptionType=1";
	  //判断当前浏览器是否支持WebSocket  
      if ('WebSocket' in window) {  
          websocket = new WebSocket(url);  
      }  
      else {  
          alert('当前浏览器 Not support websocket')  
      }  
     
      //连接发生错误的回调方法  
      websocket.onerror = function () {  
           setMessageInnerHTML("WebSocket连接发生错误");  
      };  
     
       //连接成功建立的回调方法  
       websocket.onopen = function () {  
           setMessageInnerHTML("WebSocket连接成功");  
       }  
     
      //接收到消息的回调方法  
       websocket.onmessage = function (event) {  
           setMessageInnerHTML(event.data);  
      }  
    
       //连接关闭的回调方法  
       websocket.onclose = function () {  
          setMessageInnerHTML("WebSocket连接关闭");  
       }  
     
	 }
       //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。  
       window.onbeforeunload = function () {  
           closeWebSocket();  
       }  
     
       //将消息显示在网页上  
       function setMessageInnerHTML(innerHTML) {  
          document.getElementById('message').innerHTML += innerHTML + '<br/>';  
      }  
	  
	  	   //清空日志
       function clearMessage() {  
			//alert("点击了");
          document.getElementById('message').innerHTML = '';  
       }  
     
      //关闭WebSocket连接  
       function closeWebSocket() {  
           websocket.close();  
       }  
    
       //发送消息  
       function send() { 
		   //alert("点击了");
          var message = document.getElementById('text').value;  
          websocket.send(message);  
       }  
	   
  </script>  
  
</head>  
<body>  
    Welcome<br/>  
	<input id="url" type="text" style="width: 500px;" value="ws://127.0.0.1:12345/vscodeDebug"/>
	<button type="button" onclick="connect()">连接</button>  
	<hr/>  
	
    <input id="text" type="text" style="width: 500px;" />
	<button type="button" onclick="send()">发送消息</button>  
	<hr/>    

	<button type="button" onclick="closeWebSocket()">关闭WebSocket连接</button>  	
	<button type="button" onclick="clearMessage()">清空日志</button>  

	<hr/>  
	<div id="message"></div>  
  
</body>  
</html> 